<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue中使用animate.css动画库</title>
  <link rel="stylesheet" href="./css/animate.css">
  <style>
    @keyframes bounce-in{
      0%{
        transform: scale(0);
      }
      50%{
        transform: scale(1.5)
      }
      100%{
        transform: scale(1)
      }
    }

    /* .fade-enter-active{ */
    
    .active{
      transform-origin: left center;
      animation: bounce-in 1s;
    }
    /* .fade-leave-active{ */
    .leave{
      transform-origin: left center;
      animation: bounce-in 1s reverse;
    }

  </style>
</head>
<body>
  <script src="./js/vue2.js"></script>
  <div id="app">
    <!-- 可以使用class自定义类名， 再使用animate库来使用 -->
    <transition 
      name="fade"
      enter-active-class="animated bounce"
      leave-active-class="animated shake"
      >
        <h1 v-if="type">animate动画</h1>      
    </transition>
    <button @click="handleClick">切换</button>
  </div>
</body>
</html>
<script>
  var vm = new Vue({
    el: '#app',
    data:{
      type:true,
    },
    methods: {
      handleClick: function(){
        this.type = !this.type;
      }
    }
  });
</script>